/*
* @login.vue
* @deprecated 系統登錄的主頁面
* @author
* @update (czh 2021/09/9)
*/
<template>
    <div class="login" id="login">
        <img src="/src/assets/image/bg_sreen.png">
      <nameLogin
          ref="nameLogin"
         >
      </nameLogin>
<!--        <div class="content-area">
            <div class="logo-box">
                <svg-icon
                    iconClass="a-lianbizhuilogohengbai"
                    disabled-tool-tip
                    class="icon-drawer"
                ></svg-icon>
            </div>
            <div class="inner">
                <div class="area_l">
                    <p class="text-w">欢迎使用链必追</p>
                    <p class="text-t">虚拟货币案件智能研判平台</p>
                    <p class="text-w-e">Welcome to Beosin-Trace</p>
                </div>
                <div class="area-r">
                    <p class="title" :class="{otherTitle: areaType === 4,regTitle: areaType === 3}">
                        {{ areaType === 3 ? "注册" : areaType === 4 ? "重置密码" : "登录中心" }}
                    </p>
                    &lt;!&ndash;          賬號登錄          &ndash;&gt;
                    <nameLogin
                        ref="nameLogin"
                        v-if="areaType === 1"
                        :isSignatured="isSignatured"
                        :chipId="form.chipId"
                        :name="this.form.name">
                    </nameLogin>
                    &lt;!&ndash;          手機登錄          &ndash;&gt;
                &lt;!&ndash; <phoneLogin
                        v-if="areaType === 2"
                        :isSignatured="isSignatured"
                        :chipId="form.chipId">
                    </phoneLogin>&ndash;&gt;
                    &lt;!&ndash;          注冊賬號          &ndash;&gt;
                &lt;!&ndash; <reg v-if="areaType === 3"></reg>&ndash;&gt;
                    &lt;!&ndash;          忘記密碼          &ndash;&gt;
                    <resetPwd v-if="areaType === 4"></resetPwd>
                </div>
            </div>
            <div class="footer-box">
                <p class="footer-w">
                    成都链安科技有限公司&nbsp;版权所有&nbsp;&nbsp;｜&nbsp;&nbsp;蜀ICP备18013498号-1&nbsp;&nbsp;&nbsp;&nbsp;
                </p>
                <p class="footer-w">
                    联系地址：成都市武侯区世纪城南路599号天府软件园D7座504室&nbsp;&nbsp;&nbsp;&nbsp;联系电话：&nbsp;028-8326-2585
                </p>
            </div>
        </div>
        &lt;!&ndash;到期弹窗&ndash;&gt;
        <be-msg-dialog
            @confirm="() => (this.delTip = false)"
            :isShow.sync="delTip"
            :isShowCancel="false"
            title="您的账号权益已到期，请及时续费">
        </be-msg-dialog>-->
    </div>
</template>

<script lang="ts">
// import { signatureIssued, signatureValid } from "@/api/signature.js";
// import phoneLogin from "@/views/login/components/phone-login";
// import reg from "@/views/login/components/user-registration";
// import resetPwd from "@/views/login/components/reset-password";
 import nameLogin from "@/views/login/components/name-login.vue";
import { defineComponent } from "@vue/composition-api";
import {login} from "@/api/login";

export default defineComponent({
      name: "Login",
      data() {
          return {
              form: {
                  name: this.$root.userName,
                  chipId: this.$root.chipId,
              },
              isSignatured: false,
              areaType: 1,
              delTip: false,
          };
      },
      components: {
          // phoneLogin,
          // reg,
          // resetPwd,
           nameLogin,
      },
      mounted() {
          login()
         /* if ( this.form.name && this.form.name !== '' && this.form.chipId && this.form.chipId !== null ) {
              this.signatureInit();
          }
          document.getElementById("login").oncontextmenu = () => {
              return false;
          };*/
          // 初始化背景动画

      },
      beforeDestroy() {
          // 销毁背景动画

      },
      methods: {
          //自动签名设置
          signatureInit() {
              if (this.areaType === 1) {
                  this.$refs.nameLogin.form.name = this.form.name;
              }
              const header = {  username: this.form.name}
              const params = {  "X-trust-appid": this.form.chipId}
              signatureIssued(header,params
              ).then((res) => {
                  signatureValid(header,
                      {
                          "X-trust-appid": res["X-trust-appid"],
                          "X-trust-timestamp": res["X-trust-timestamp"],
                          "X-trust-nonce": res["X-trust-nonce"],
                          "Content-MD5": res["Content-MD5"],
                          "X-trust-signature": res["X-trust-signature"],
                          "Content-type": res["Content-Type"],
                      }
                  ).then((response) => {
                      this.isSignatured = true;
                  });
              });
          },
      },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.login {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    width: 100vw;
    min-width: 1280px;
    height: 100vh;
    //   background: url('../../../assets/image/pc/loginBg.png') no-repeat;
    background: linear-gradient(
        180deg,
        #000000 0%,
        rgba(0, 0, 0, 0.9) 40%,
        rgba(5, 29, 41, 0) 100%
    );
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    .content-area {
        display: flex;
        flex-wrap: wrap;
        width: 1140px;
        height: 100%;
        margin: auto;
        .logo-box {
            margin-top: 40px;
            width: 100%;
            .svg-icon {
                width: 195px;
                height: 68px;
                color: #ffffff;
            }
        }
        .inner {
            width: 100%;
            height: 460px;
            justify-content: space-between;
            @include flex(center, center);
            align-self: center;
        }
        .footer-box{
            width: 100%;
            margin-bottom: 32px;
            align-self: flex-end;
            p{
               overflow-wrap: break-word;
                color: #9BC8DF;
                font-size: 14px;
                font-family: PingFangSC-Regular, sans-serif;
                white-space: nowrap;
                line-height: 24px; 
            }
            
        }

        .area_l {
            width: calc(100% - 440px);
            height: 100%;
            p {
                width: 100%;
            }
            .text-w {
                margin-top: 64px;
                color: rgba(155, 200, 223, 1);
                font-size: 40px;
                font-family: PingFangSC-Regular, sans-serif;
                white-space: nowrap;
                line-height: 56px;
                align-self: flex-start;
            }
            .text-t {
                color: rgba(255, 255, 255, 1);
                font-size: 51px;
                font-family: PingFangSC-Regular, sans-serif;
                white-space: nowrap;
                line-height: 72px;
                background-image: linear-gradient(
                    180deg,
                    rgba(255, 255, 255, 1) 0%,
                    rgba(182, 224, 255, 1) 100%
                );
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            .text-w-e {
                color: rgba(155, 200, 223, 1);
                font-size: 40px;
                font-family: Helvetica, sans-serif;
                white-space: nowrap;
                line-height: 53px;
            }
        }
        .area-r {
            width: 300px;
            height: 100%;
            padding: 0 70px;
            //background-image: url(../../../assets/image/pc/bg_logo.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            .title {
                @include text(24px, rgba(0, 0, 0, 0.85), 31px);
                margin-top: 46px;
                margin-bottom: 24px;
            }
            .otherTitle {
                margin-top: 46px;
                margin-bottom: 24px;
            }
            .regTitle {
                margin-top: 46px;
                margin-bottom: 24px;
            }
        }
    }
}
</style>
<style lang="scss">
.login {
    .el-carousel__container {
        height: 100%;
    }
    .el-carousel__item.is-animating {
        text-align: center;
    }
    .focus {
        .el-form-item__content {
            border-bottom: 1px solid #8194cc !important;
        }
    }
    .label {
        .iconImg {
            height: 16px;
            position: relative;
            top: -2px;
            display: inline-block;
        }
        .el-form-item__content {
            width: 100%;
            border: 1px solid rgba(0, 0, 0, 0.15);
            padding: 8px;
            border-radius: 2px;
            background-color: #ffffff;
        }
        .el-input__inner {
            border-bottom: none;
        }
        .el-input-group__prepend {
            width: 16px;
            padding: 0 3px;
            text-align: center;
        }
        .el-form-item__error {
            left: 32px;
            top: 101%;
        }
    }
}
</style>

<!--1080p的145% - 150%放大-->
<style scoped lang="scss">
@media screen and (min-width: 1280px) and (max-height: 638px) and (max-width: 1326px)  {
.login{
    .content-area {
        .logo-box{
            margin-top: 10px;
        }
        .inner{
            height: 442px;
        }
    }
}
}
</style>